/*充电支付样式表*/
@charset "utf-8";
body{
	letter-spacing:1px;
}
/*bg适配*/
@media only screen and (max-width: 360px){
	.charging-animation{
		height: 24rem;
	}
}
@media only screen and (min-width:361px) and (max-width:480px){
		.charging-animation{
		height: 29rem;
	}
}
@media only screen and (min-width:481px) and (max-width:640px){
		.charging-animation{
		height: 35rem;
	}
}
@media only screen and (min-width:641px) and (max-width:750px){
	.charging-animation{
		height: 50rem;
	}
}
@media only screen and (min-width:751px) and (max-width:800px){
	.charging-animation{
		height: 61rem;
	}
}
@media screen and (min-width:801px){
	.charging-animation{
		height: 110rem;
	}
}
/*bg*/
.overlay-bg0{
	background: url(../images/charging_bg.png);
	background-size: cover;
}
.overlay-bg1{
	background: linear-gradient(to bottom, #E0F2F2, #fff);
}

/*border*/
.rule-line{
	border-top: 1px solid #C9D9D9;
	padding-bottom: 1rem;
}
/*左边间距*/
.l-sp{
padding-left: 0.5rem;
}
/*上下间距*/
.t-b{
padding: 2rem 0 3rem 0;
}
.t-b1{
	padding: 1.2rem 0 3rem 0; 
}
.mg-15{
	margin-top: 15px;
}
.mg-20{
	margin-top:20px;
}
.btnGary{
	background: #DEDEDE;
	color:#888888;
	text-align: left;
	border:0.1rem solid #CCCCCC;
	border-width: 0.1rem;
	height:18px;
	line-height:18px;
	padding-top:23px;
	padding-bottom: 23px;
	font-size:18px

}
.btnGbg{
	background: #CCCCCC;
}
.btnObg{
	background: #ff7f18;
}
/*开始充电样式表*/
.mc-bg,.cs-bg{
	background: #F2F4F5;
}
.cs-row{
	margin: 1.2rem 0;
	padding: 1.28rem;
}
.cs-title .cs-t1{
	padding: 0 0 0.5rem 0;
}
.cs-title .cs-t2{
	padding:0.5rem 0 0 0;
}
.reminder{
	padding: 3rem;
}
.reminder p{
	text-align: center;
}
.reminder-bg{
	margin-bottom: 2rem;
	text-align: center;
}
.reminder-bg img{
	width: 16.6rem;
}
.fee-rate-data p{
	text-align: center;
}
/*输入桩二维码样式*/
.mc-ct{
	padding: 16rem 1.28rem 10rem;
}
.mc-pic{
	text-align: center;
}
.mc-pic img{
	height: 14rem;
}
.charging-ct{
	padding: 1.28rem;
}
.pd-lr{
	padding: 0 1.28rem;
}
.charging-data-list{
	padding-bottom: 2rem;
}
.charging-data-list table{
	width: 100%;
}
/*圆形进度条*/
.charging-circle{
	padding: 1rem 4rem 2rem;
}
.circle{
	width: 180px;
	height: 180px;
	background: rgba(255,255,255,0.3);
	/*border: 1px solid #f1f1f1;*/
	border-radius: 100%;
	margin: 0 auto;
	text-align: center;
	position: relative;
}
.circle-data{
	padding-top: 4rem;
}
.circle-data .p1{
	margin-bottom: 2rem;
}
.charging-circle canvas{
	position: absolute;
	display: block;
	z-index: 9;
}
/*充电金额*/
.charging-money{
	padding: 1rem;
	text-align: center;
	color: #F48423;
}
/*转圈圈*/
#test {
  height : 10px;
  width : 10px;
  position : absolute;
  background-color : #fff;
  border-radius : 50%;
  top: 35px;
  left: 10px;
}

#rond {
  height: 180px;
  width : 180px;
  border : 1px solid #fff;
  border-radius : 50%;
  position :absolute;
  top: -1px;
  left: -1px;
  animation : rond 2s infinite;
  -webkit-animation : rond 2s infinite;
}

@keyframes rond {
  0% {transform : rotate(0deg);}
  100% {transform : rotate(360deg);}
}

@-webkit-keyframes rond {
  0% {-webkit-transform : rotate(0deg);}
  100% {-webkit-transform : rotate(360deg);}
}